<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
	<title>新事务申报</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="<%= basePath %>assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
	<link href="<%= basePath %>assets/css/bui-min.css" rel="stylesheet" type="text/css" />
	<link href="<%= basePath %>assets/css/page-min.css" rel="stylesheet" type="text/css" />
	<link href="<%= basePath %>assets/css/prettify.css" rel="stylesheet" type="text/css" />
	<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
	<style type="text/css">
		.doc-content {
			padding: 30px;
		}
		
		.doc-content .panel .panel-header {
			background: #DFF0D8;
		}
		
		.doc-content .panel {
			text-align: center;
			letter-sapcing: 5px;
		}
		
		.doc-content .panel h3 {
			font-size: 20px;
		}
		
		.doc-content .panel .panel-body {
			width: 100%;
		}
		
		.doc-content .panel .panel-body .row {
			display: inline-block;
			width: 10/0%;
		}
		
		.doc-content .panel .panel-body .row .table {
			width: 100%;
			margin-left: 5%;
		}
		
		.doc-content .panel .panel-body .row .table textarea {
			width: 100%;
		}
	</style>
	
	<script>
		//使用ajax动态获取事务的类型对应的明细
		function serviceTypeChange() {
	
			//取出选中的值
			var checkText = $("#serviceType").find("option:selected").val();
			var params = $("#form").serialize();
			$.ajax({
				type : "post",
				url : "/BankRequestEnsurance/transaction/typePost",
				data : params,
				dataType : "json",
				success : function(data, textStatus) {
					var generated ="";
					var details = new Array();
					//传过来的字符串以@@作为分隔符
					details = data.split("@@");
					
					//迭代输出下拉列表框的每一个选项
					for (var integer = 0; integer < details.length; integer = integer + 2) {
						generated = generated + "<option value='" + details[integer] + "'>" + details[integer + 1] + "</option>"
					}
					
					//清空原先的内容
					$("#showDetail").empty();
					
					//追加新的选项
					$(generated).appendTo("#showDetail");
				}
			});
	
		}
		function typeDetailsChange() {
			var params = $("#form").serialize();
			$.ajax({
				type : "post",
				url : "/BankRequestEnsurance/transaction/detailsPost",
				data : params,
				dataType : "json",
				success : function(data, textStatus) {
					var details = new Array();
					console.log(data);
					details = data.split("@@");
					
					//根据获取的事务明细更新单元格的值
					$("#serviceLevel").text(details[0]);
					$("#serviceDept").text(details[1]);
					$("#serviceResponseTime").text(details[2]);
					$("#serviceEndTime").text(details[3]);
					$("#transDetail").text(details[4]);
					console.log(details[0]);
				}
			});
		}
	</script>
</head>
<body>

	<div class="doc-content">
		<div class="panel ">
			<div class="panel-header">
				<h3>选填事务详细信息</h3>
			</div>
			<div class="panel-body">
				<div class="row">
					<form id="form" name="myform" method="post"
						action="<%= basePath %>transaction/demandReport">
						<table class="table table-bordered">
							<tr>
								<td align="right">事务种类</td>
								<td>
									<select onchange="serviceTypeChange()" id="serviceType"
										name="serviceType">
										<option value="-1" selected="selected">请选择</option>
										<s:iterator value="#transTypeList" var="transType">
											<option value="<s:property value="#transType.ttypeid"/>">
												<s:property value="#transType.ttname"/>
											</option>
										</s:iterator>
									</select>
								</td>
								<td align="right">事务明细</td>
								<td colspan="3">
									<select onchange="typeDetailsChange()"
										id="showDetail" name="typeDetail">
									</select>
								</td>
							</tr>
							<tr>
								<td align="right">服务保障级别</td>
								<td id="serviceLevel"></td>
								<td align="right">是否初审</td>
								<td id="isChecked">是</td>
								<td align="right">需求处理部门</td>
								<td id="serviceDept"></td>
							</tr>
							<tr>
								<td align="right">服务响应时间（小时）</td>
								<td id="serviceResponseTime"></td>
								<td align="right">服务解决时限（小时）</td>
								<td id="serviceEndTime"></td>
								<td align="right">&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td align="right">事务备注</td>
								<td colspan="5" id="transDetail"></td>
							</tr>
							<tr>
								<td align="right">需求事项描述</td>
								<td colspan="5">
							    	请简要描述需求解决事项的现状、数量、缓急程度等
									<br /> 
									<label>
										<textarea cols="100" rows="5" name="transaction.tdesc"></textarea>
									</label>
								</td>
							</tr>
							<tr>
								<td align="right">需求申报点</td>
								<td>
									<input type="text" name="transaction.tdeptname" 
										value="<s:property value="#session.userInfo.BaseGroup.name"/>"/>
								</td>
								
								<td align="right">需求申报人姓名</td>
								<td>
									<input type="hidden" name="transaction.userid" 
									       value="#session.userInfo.user.id">
									<label>
										<input type="text" name="transaction.username"
											value="<s:property value="#session.userInfo.user.firstName"/>" />
									</label>
								</td>
								
								<td align="right">联系电话</td>
								<td>
									<input type="text" name="transaction.tphone" value="123456"/>
								</td>
							</tr>
							<tr>
								<td colspan="6" align="center" style="text-align: center;">
									<input type="submit" class="button button-info" value="提 交" />
									&nbsp;&nbsp;&nbsp;&nbsp; 
									<input type="reset" class="button button-warning" value="重 置" />
								</td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
<body>
</html>
